<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
</head>
<body>
  <dom-module id="shared-styles">
    <template>
      <style>
        #zot {
          border: 1px solid black;
        }
      </style>
    </template>
  </dom-module>

  <dom-module id="my-element">

    <template>
      <style>
        #foo {
          border: 2px solid green;
        }
      </style>
      <style>
        #bar {
          border: 3px solid orange;
        }
        </style>
      <div id="foo">foo</div>
      <div id="bar">bar</div>
    </template>
  </dom-module>

  <dom-module id="my-element2">

    <template>
      <style include="shared-styles">
        #zug {
          border: 4px solid red;
        }
      </style>
      <div id="zug">zug</div>
      <div id="zot">zot</div>
    </template>

    <script type="module">
</script>

  </dom-module>

  <script type="module">
import { Polymer } from '../../polymer-legacy.js';
import { PolymerElement } from '../../polymer-element.js';
import { DomModule } from '../../lib/elements/dom-module.js';
suite('elements including multiple styles', function() {

  suiteSetup(function() {
    const skip = window.ShadyDOM || !Polymer;
    if (skip) {
      this.skip();
    } else {
      class MyElement extends PolymerElement {
        static get is() { return 'my-element'; }
      }
      customElements.define(MyElement.is, MyElement);

      class MyElement2 extends MyElement {
        static get is() { return 'my-element2'; }
        static get template() {
          Object.getPrototypeOf(this.prototype).constructor.template;
          const t = DomModule.import(MyElement2.is, 'template');
          const superT = MyElement.template;
          t.content.insertBefore(superT.content.cloneNode(true), t.content.firstElementChild.nextElementSibling);
          return t;
        }
      }
      customElements.define(MyElement2.is, MyElement2);
    }
  });

  function assertComputed(element, value, property, pseudo) {
    var computed = getComputedStyle(element, pseudo);
    property = property || 'border-top-width';
    if (Array.isArray(value)) {
      assert.oneOf(computed[property], value, 'computed style incorrect for ' + property);
    } else {
      assert.equal(computed[property], value, 'computed style incorrect for ' + property);
    }
  }

  test('multiple styles preserved separately in element root and apply', function() {
    const e = document.createElement('my-element');
    document.body.appendChild(e);
    const styles = e.shadowRoot.querySelectorAll('style');
    assert.equal(styles.length, 2);
    assertComputed(e.$.foo, '2px');
    assertComputed(e.$.bar, '3px');
  });

  test('super class and included styles preserved separately in element root and apply', function() {
    const e = document.createElement('my-element2');
    document.body.appendChild(e);
    const styles = e.shadowRoot.querySelectorAll('style');
    assert.equal(styles.length, 4);
    assertComputed(e.$.foo, '2px');
    assertComputed(e.$.bar, '3px');
    assertComputed(e.$.zug, '4px');
    assertComputed(e.$.zot, '1px');
  });

});
</script>
</body>
</html>
